$(function() {
    let dataIndex;
    let data = []; // 全局渲染数据
    let page = 1; // 初始页面
    let num = 7; // 每一页渲染10条数据
    let start;
    // 记录分页
    let fenList = [];
    let fenElement;
    let addId;
    let deleteIndex; // 记录删除按钮所在对象的下标
    let biggestId; // 记录最新添加的对象的id值
    let applyWork;
    let workSelect;
    let seleClicked = false; // 记录查询按钮的点击状态
    // 页面渲染
    draw(data, page);
    function draw(data, page) {
        // console.log("-----------------------------------------")
        if (seleClicked) {
            data = workSelect;
        } else {
            data = Work_data;
        }
        // console.log(data)
        $("tbody").html(""); // 清空前面渲染的数据
        // 截取数组,用于存放要渲染的数据
        applyWork = data.slice((page - 1) * num, (page - 1) * num + num);
        applyWork.forEach(item => {
            let str = "";
            str = `
                <tr>
                	<td>${item.Work_id}</td>
                	<td>${item.Work_name}</td>
                	<td>${item.Work_sex}</td>
                	<td>${item.Work_place}</td>
                	<td>${item.Work_job}</td>
                	<td>${item.Work_idcard}</td>
                	<td>${item.Work_content}</td>
                	<td>${item.Work_tel}</td>
                	<td>${item.Work_qq}</td>
                	<td>${item.Work_mail}</td>
                	<td>${item.Work_birthdata}</td>
                	<td>${item.Work_education}</td>
                    <td>
                        <button class="change btn btn-info" type="button" data-toggle="modal" data-target="#myModal">编辑</button>
                        <button class="delete btn btn-danger" type="button" data-toggle="modal" data-target="#myModaldelete">删除</button>
                    </td>
                </tr>
            `;
            $("tbody").append(str);
        })
    }
    // 分页页面跳转
    function fenyeDraw(data) {
        if (seleClicked) {
            data = workSelect;
        } else {
            data = Work_data;
        }
        let fenElement = ""; // 清空字符串
        $(".liNum").remove(); // 删除前面添加的子元素
        start = Math.ceil(data.length / num);
        for (let i = 1; i <= start; i++) {
            fenElement += `
                <li class="liNum"><a href="#">${i}</a></li>
            `;
        }
        $("ul li:first-child").after(fenElement)
    }
    fenyeDraw(data);
    // 事件委托，给动态添加的严肃绑定事件,点击页码跳转
    bigJump(data);

    function bigJump(data) {
        $("ul").on("click", ".liNum", function() {
            page = parseInt($(this).children().text());
            jump(data, page);
        })
    }

    function jump(data, index) {
        page = index;
        draw(data, page);
    }

    // 上一夜页，下一页
    $("#pre").click(function() {
        if (page != 1) {
            page = page - 1;
            // console.log("2222222222222222222222222")
            draw(data, page);
            // console.log(page);
        }
    })

    $("#next").click(function() {
        if (page < start) {
            page = page + 1;
            draw(data, page);
            // console.log(page);
        }

    })

    // 修改与删除
    $("tbody").on("click", ".change", function() {
        $("#caozuo").css("display", "block");
        Work_data.forEach((item, index) => {
            if (item.Work_id == $(this).parent().parent().children(":first").text()) {
                $("#number").val(item.Work_id);
                $("#name").val(item.Work_name);
                // 性别
                if (item.Work_sex == "男") {
                    $("#sex").val(1);
                } else {
                    $("#sex").val(2);
                }
                // 部门
                if (item.Work_place == "园长办公室") {
                    $("#department").val(1);
                } else {
                    $("#department").val(2);
                }
                // 职务
                if (item.Work_job == "园长") {
                    $("#staff").val(1);
                } else {
                    $("#staff").val(2);
                }
                $("#idcard").val(item.Work_idcard);
                $("#content").val(item.Work_content);
                $("#tel").val(item.Work_tel);
                $("#qq").val(item.Work_qq);
                $("#mail").val(item.Work_mail);
                $("#birthdata").val(item.Work_birthdata);
                // 学历
                if (item.Work_education == "研究生") {
                    $("#education").val(1);
                } else {
                    $("#education").val(2);
                }
                dataIndex = index;
            }
        })
        // 确认
        $("#myModal").on("click", "#queren", function(e) {
            Work_data[dataIndex].Work_id = Number($("#number").val());
            Work_data[dataIndex].Work_name = $("#name").val();
            Work_data[dataIndex].Work_sex = $("#sex option:selected").text();
            Work_data[dataIndex].Work_place = $("#department option:selected").text();
            Work_data[dataIndex].Work_job = $("#staff option:selected").text();
            Work_data[dataIndex].Work_idcard = $("#idcard").val();
            Work_data[dataIndex].Work_content = $("#content").val();
            Work_data[dataIndex].Work_tel = $("#tel").val();
            Work_data[dataIndex].Work_qq = $("#qq").val();
            Work_data[dataIndex].Work_mail = $("#mail").val();
            Work_data[dataIndex].Work_birthdata = $("#birthdata").val();
            Work_data[dataIndex].Work_education = $("#education option:selected").text();
            // console.log(Work_data[dataIndex]); // 修改成功，再次渲染页面
            draw(Work_data, page);
            // $("#myModal").css("display", "none");
            e.preventDefault(); // 阻止默认提交
            console.log("=-=-=-=-")
        })
        // 取消修改
        $("#myModal").on("click", "#quxiao", function(e) {
            // $("#myModal").css("display", "none");
            e.preventDefault();
            console.log("=-=-=-=-")
        })
    })

    // 编辑form表单内容，更新数组的数据
    // 添加
    // biggestId = Work_data[Work_data.length - 1].Work_id + 1;
     
    // addId = biggestId;
     
    $("#btn_Add").click(function() {
        $("#aryyAd").css("display", "block");
        addId = Work_data.length
        biggestId = Work_data.length+1;
        // $("#numberAd").val(addId);
        $("#numberAd").val(biggestId);
        // addId++;
    })
    // 确认
    $("#myModal2").on("click", "#querenAd", function(e) {
        addId++;
        Work_data[addId - 1] = {};
        Work_data[addId - 1].Work_id = Number($("#numberAd").val());
        Work_data[addId - 1].Work_name = $("#nameAd").val();
        Work_data[addId - 1].Work_sex = $("#sexAd option:selected").text();
        Work_data[addId - 1].Work_place = $("#departmentAd option:selected").text();
        Work_data[addId - 1].Work_job = $("#staffAd option:selected").text();
        Work_data[addId - 1].Work_idcard = $("#idcardAd").val();
        Work_data[addId - 1].Work_content = $("#contentAd").val();
        Work_data[addId - 1].Work_tel = $("#telAd").val();
        Work_data[addId - 1].Work_qq = $("#qqAd").val();
        Work_data[addId - 1].Work_mail = $("#mailAd").val();
        Work_data[addId - 1].Work_birthdata = $("#birthdataAd").val();
        Work_data[addId - 1].Work_education = $("#educationAd option:selected").text();
        draw(Work_data, page);
        // console.log(addId);
        e.preventDefault(); // 阻止默认提交
        fenyeDraw(Work_data);
        // console.log(Work_data)
        // 添加完成后清空部分表单的内容
        $("#staffAd").val();
        $("#idcardAd").val("");
        $("#contentAd").val("");
        $("#telAd").val("");
        $("#qqAd").val("");
        $("#mailAd").val("");
        $("#birthdataAd").val("");
    })
    // 取消添加
    $("#quxiaoAd").click(function(e) {
        // $("#aryyAd").css("display", "none");
        e.preventDefault(); // 阻止默认提交
    })
    // 删除
    $("tbody").on("click", ".delete", function() {
        $("#arryDelete").css("display", "block");
        deleteIndex = $(this).parent().parent().children(":first").text() - 1;
    })
    // 页面元素数组追加元素内容
    // 确定删除
    $(".btn-delete").click(function() {
        Work_data.forEach((item, index) => {
            if (item.Work_id == deleteIndex + 1) {
                Work_data.splice(index, 1);
                draw(Work_data, page);
                fenyeDraw(Work_data);
                // console.log(Work_data);
                $("#arryDelete").css("display", "none");
                // console.log(Work_data.length);
                // console.log(Work_data)
            }
        })
    })
    // 取消删除
    $(".btn-quxiao").click(function() {
        $("#arryDelete").css("display", "none");
    })

    // 查询
    $(".btn-select").click(function(e) {
        seleClicked = true;
        workSelect = [];
        let i = 0;
        Work_data.forEach((item, index) => {
            if (item.Work_place == $(this).prev().children().val() ||
                item.Work_job == $(this).prev().children().val() ||
                item.Work_education == $(this).prev().children().val()
            ) {
                workSelect[i] = item;
                i++;
            }
        })
        e.preventDefault();
        draw(data, page);
        bigJump(workSelect);
        fenyeDraw(workSelect, page);
        // console.log("3333333333333333333333")
        // console.log(workSelect)
    })
    // 查找全部
    $(".btn-selectAll").click(function(){
        seleClicked = false;
        draw(data,page);
    })
})
